<!-- learn-data -->
<template>
  <div class="learn-data">
    <h2 class="progress-title">学习进度</h2>
    <span class="learned">已学习课程</span>
    <span class="change-show">更换数据图</span>
    <hr />
    <div class="learning-time">
      <p>
        今日已学 : <span>02</span>小时<span>25</span>分钟
        <br />
        本周已学 : <span>28</span>小时<span>25</span>分钟
        <br />
        本月已学 : <span>48</span>小时<span>25</span>分钟
        <br />
        总计时长 : <span>68</span>小时<span>25</span>分钟
      </p>
    </div>
    <p class="detail">详情</p>
  </div>
</template>
<style scoped lang="less">
.learn-data {
  position: relative;
  width: 45%;
  height: 40vh;
  background-color: #18181c;
  border-radius: 10px;
  .progress-title {
    font-size: 20px;
    text-align: center;
    margin-top: 15px;
    color: #d5d5d6;
  }
  .learned {
    position: absolute;
    z-index: 1000;
    background-color: #18181c;
    margin-right: 0px;
    padding-left: 8px;
    padding-right: 8px;
    right: 5px;
    font-size: 15px;
    color: #63e2b7;
    margin-top: 10px;
  }
  .change-show {
    position: absolute;
    left: 2px;

    font-size: 15px;
    color: #63e2b7;
    margin-top: 22px;
  }
  hr {
    margin-top: 20px;
    border: 0;
    border-top: 0.5px solid #63e2b7;
  }
  .learning-time {
    margin-left: 5px;
    margin-top: 28px;
    font-size: 18px;
    color: #d5d5d6;
    line-height: 50px;
    span {
      color: #63e2b7;
    }
  }
  .detail {
    position: absolute;
    right: 25px;
    bottom: 30px;
    font-size: 15px;
    color: #63e2b7;
  }
}
</style>
